<script setup lang="ts">
import {SmoothDndContainer01} from "@/components/SmoothDnd/01/SmoothDndContainer01";
import {SmoothDndDraggable01} from "@/components/SmoothDnd/01/SmoothDndDraggable01";
import {useSmoothDnd03a} from "@/stores/smoothDnd03a";
import {useEditorDebugStore} from "@/stores/debug";
import {storeToRefs} from "pinia";
import MaterialRender03a from "@/material/MaterialRender03a.vue"

const smoothDndStore = useSmoothDnd03a();
const debugStore = useEditorDebugStore();
const {items, selectedItemId, selectedItem, materials} = storeToRefs(smoothDndStore)

</script>

<template>
  <h2>注：左右两个区域的group-name的值需要相同</h2>
  <div class="demo01">
    <div class="left">
      <SmoothDndContainer01
          behaviour="copy"
          class="item-wrap"
          group-name="blocks"
          orientation="vertical"
          tag="div"
          :get-child-payload="(index:number)=>{
            return materials[index];
          }"
      >
        <SmoothDndDraggable01 v-for="material in materials" :key="material" class="item">
          <MaterialRender03a :materialType="material"></MaterialRender03a>
        </SmoothDndDraggable01>
      </SmoothDndContainer01>
    </div>
    <div class="center">
      <SmoothDndContainer01
          group-name="blocks"
          orientation="vertical"
          tag="div"
          @drop="item => {
            const newItems = smoothDndStore.applyDrag(items, item);
            return smoothDndStore.replaceAll(newItems);
          }"
      >
        <SmoothDndDraggable01
            v-for="item in items"
            :key="item"
            class="item"
            @click="smoothDndStore.setSelectedItemId(item.id)">
          <MaterialRender03a
              :materialType="item"
              :class="{active:debugStore.debug || item.id===selectedItemId}"
          ></MaterialRender03a>
        </SmoothDndDraggable01>
      </SmoothDndContainer01>
    </div>
    <div class="right">
      <div>
        {{ selectedItem }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.demo01 {
  display: flex;
}

.left {
  width: 320px;
  background: rgba(62, 175, 124, 0.5);
}

.center {
  flex: 1;
  background: rgba(0, 58, 140, 0.5);
}

.right {
  width: 320px;
  background: #f2f2f2;
}

.item-wrap {
  display: flex;
  padding: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.item {
  min-width: 100px;
  height: 30px;
  color: #fff;
  background: #3eaf7c;
  margin: 8px;
  text-align: center;
}

.active {
  border: 1px solid #003a8c;
}
</style>
